<template>
  <div class="goods-block pad-t-15" :style="customStyle" v-if="curDataList.length > 0">
    <div class="flex flex-between pad-l-24 pad-r-22 font-15 pad-b-15" v-if="blockType == 3">
      <span class="font-w">失效商品</span>
      <span style="color: #FF5540;" @click="clearInvalidBlock">清空</span>
    </div>
    <ul class="pad-l-15 pad-r-15 pad-b-15" :class="{'invalid-ul': blockType == 3}">
      <li class="v-align-c mar-t-15" v-for="(item, index) in curDataList" :key="index" @click="toGoodsDetail(item)">
        <div class="v-align-c">
          <span class="invalid-tag mar-r-4" v-if="blockType == 3">失效</span>
          <div class="width-112 height-112 pos-rel">
            <img v-if="item.mainImage" :src="item.mainImage" class="width-112 height-112 radius-5" alt="">
            <img class="recommend" v-if="fileSpace && item.showHomePage === 1" :src="fileSpace + '/images/library-recommend.png'" alt="">
            <div class="sell-out" v-if="blockType == 2">
              <div class="del-layer align-c">
                <div class="font-15 font-w font-white">已售完</div>
                <div class="font-9">SOLD OUT</div>
              </div>
            </div>
          </div>
        </div>
        <div class="v-flex-between height-112 flex-item mar-l-10">
          <p class="line-2 mar-t-4 font-13">{{item.title}}</p>
          <div class="font-12" style="color:#EB4E4E;" v-if="blockType == 2">待企业补货后自动上架</div>
          <div class="font-12" style="color:#EB4E4E;" v-if="blockType == 3">商品已不能购买</div>
          <div class="width-100p" v-if="blockType == 0 || blockType == 1">
            <div class="font-12 namespace" v-if="item.income">
              <span class="namespace-l">{{getAppInfo.commissionAlias || '分销赚'}}</span>
              <span class="namespace-r">{{item.income}}元</span>
            </div>
            <div class="font-12 flex flex-between mar-t-3">
              <div class="seckill" v-if="item.promotionPrice">
                <span class="font-12">秒杀￥</span>
                <span class="font-18 font-w">{{item.promotionPrice}}</span>
              </div>
              <div class="font-red" v-else>￥<span class="font-18 font-w">{{item.sellPrice}}</span></div>
              <div class="upper-status bc-yellow" v-if="item.upperShelfFlag === 0" @click.stop="updateShelfFlag(item, 1, $event)">上架</div>
              <div class="upper-status bc-gray" v-if="!isRecommend && item.upperShelfFlag === 1" @click.stop="updateShelfFlag(item, 0, $event)">下架</div>
              <van-switch v-if="isRecommend && item.upperShelfFlag === 1" :checked="item.showHomePage === 1" @click.stop="" @change="onSwitchChange(item, $event)" size="20px" active-color="#FFD800" />
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
/**
 * dataList: 数据列表 只支持数组类型
 * blockType：模块类型 可支持字符或数字 0：未上架，1：已上架，2：已售罄，3：已失效
 * customStyle：自定义外层模块样式 只支持字符串类型
 * isRecommend：是否设置推荐 只支持布尔型 true：开启设置推荐 false：关闭设置推荐
 * 子向父通信
 * onSwitchChange：商品设置推荐的开关状态发生变化
 * clearInvalidBlock：清楚失效商品点击事件
 */
export default {
  props: {
    dataList: {
      type: Array,
      default: function() {
        return []
      }
    },
    blockType: {
      type: String || Number,
      default: 0
    },
    customStyle: {
      type: String,
      default: ''
    },
    isRecommend: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      curDataList: [],
      getAppInfo: {}
    }
  },
  watch: {
    dataList: {
      deep: true,
      immediate: false,
      handler: function(newVal) {
        this.curDataList = this.$utils.deepClone(this.dataList)
      }
    }
  },
  mounted() {
    this.curDataList = this.$utils.deepClone(this.dataList)
    this.getAppInfo = this.$pt.getStorageSync('appInfo')
  },
  methods: {
    onSwitchChange(item, event) {
      let showHomePage = event.mp.detail ? 1 : 0
      event.mp.details = {
        goodsId: item.goodsId,
        showHomePage: showHomePage
      }
      this.$emit('onSwitchChange', event)
    },
    clearInvalidBlock() {
      this.$emit('clearInvalidBlock')
    },
    updateShelfFlag(item, upperShelfFlag, ev) {
      ev.mp.details = {
        goodsId: item.goodsId,
        upperShelfFlag
      }
      this.$emit('onUpdateShelfFlag', ev)
    },
    toGoodsDetail(item) {
      this.$pt.navigateTo({url: `/pages/shop/detail/main?goodsId=${item.goodsId}&goodsType=${item.goodsType}&library=1&blockType=${this.blockType}`})
    }
  }
}
</script>
<style lang="less" scoped>
.goods-block{
  background-color: white;
  .font-red{
    color: #EB4E4E;
  }
  .invalid-tag{
    color: white;
    background-color: #999;
    border-radius: 7.25px;
    width: 30px;
    height: 15px;
    text-align: center;
    line-height: 15px;
    font-size: 11px;
  }
  ul{
    &.invalid-ul{
      position: relative;
      &::after{
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        opacity: .5;
      }
    }
    li{
      &:first-child{
        margin-top: 0px;
      }
      .v-flex-between{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
      }
      .width-100p{
        width: 100%;
      }
      .radius-5{
        border-radius: 5px;
      }
      .bc-yellow{
        background-color: #FFD800;
      }
      .bc-gray{
        background-color: #E5E5E5;
      }
      .recommend{
        position: absolute;
        left: 0;
        top: 0;
        width: 54px;
        height: 52px;
      }
      .sell-out {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        color: rgba(254, 254, 254, 0.7);
        background: rgba(0, 0, 0, 0.5);
        .del-layer {
          border-radius: 50%;
          border: 1px solid white;
          justify-content: center;
          width: 65px;
          height: 65px;
          .font-white{
            color: #fff;
          }
        }
      }
      .namespace{
        .namespace-l{
          padding: 2px 4px;
          background-color: #FED807;
        }
        .namespace-r{
          padding: 2px 4px;
          background-color:#272727;
          color: white;
          border-radius: 0 2px 2px 0;
        }
      }
      .seckill{
        color: #EB4E4E;
      }
      /deep/._van-switch{
        height: 20px;
        .van-switch{
          background-color: #E5E5E5;
          border: unset;
          .van-switch__node{
            top: 1px;
            left: 1px;
            width: calc(1em - 2px);
            height: calc(1em - 2px);
          }
        }
      }
      .upper-status{
        border-radius: 11px;
        width: 49px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        font-size: 12px;
      }
    }
  }
}
</style>
